<template>
	<view class="wap">
		<view class="head flex-y-center flex-x-center">
			<view class="title" :class="index == tabIndex ? 'active':''" v-for="(item,index) in tabList" :key="index"
				@tap="chageTab(index)">{{item}}</view>
		</view>
		<view class="head-list" v-for="(item,index) in data.data_list" :key="index">
			<view class="list-left flex-bet">
				<view>{{item.order_no}}</view>
				<view v-if="item.status==0">待付款</view>
				<view v-if="item.status==1">已完成</view>
			</view>
			<view class="list-next flex">
				<image :src="item.image">
				</image>
				<view class="list-right">
					<view class="title">{{item.name}}</view>
					<view class="flex-bet">
						<view>放单时间:</view>
						<view>{{item.order_day}}</view>
					</view>
					<view class="flex-bet">
						<view>餐标：{{item.store_price}}</view>
						<view>x{{item.success_num}}(单)</view>
					</view>
					<view class="flex-bet">
						<view>合计：{{item.pay_price}}</view>
						<image class="icon" src="@/static/img/elm-logo-ico.png" v-if="item.activity.platform=='eleme'">
							</image>
							<image class="icon" src="@/static/img/mt-logo-ico.png" v-if="item.activity.platform=='meituan'">
							</image>
					</view>
				</view>
			</view>
			<view class="list-bottom">评鉴规则：{{item.activity.rule}}</view>
			<view class="list-button-region flex-x-end">
				<navigator :url="'/pages/details/details?oid='+item.id+'&id='+item.activity_id+'&dete='+item.order_day" class="list-button list-button-text">查看详情</navigator>
				<view v-if="item.status=='0'" class="list-button list-button-text" @click="repay(item.id)">立即结算</view>
			</view>
		</view>
		
		<view v-if="data.no_list" class="bottom-text">暂无数据</view>
		<view class="bottom-text" v-if="!data.no_list&&data.no_more">我也是有底线的~</view>
		<view class="bottom-text" style="color: #888;" v-if="!data.no_list&&!data.no_more">
					 加载中...
		</view>
		<!---->
	</view>
</template>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	import {getOrderSumList,repay} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: ['全部订单', '待付款', '已完成'],
				data:{
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock:0,
			}
		},
		mounted() {
		    if (window.location.href.indexOf("?#") < 0) {
		      window.location.href = window.location.href.replace("#", "?#");
		    }
		},
		onShow() {
			this.data = {
				data_list: [],
				no_list: !1,
				no_more: !1,
				current_page: 0,
				loading_more: !0,
			}
		    this.loadDataList();
		},
			/**
			 * 页面上拉触底事件的处理函数
			 */
			onReachBottom: function (t) {
				var o = this;
				o.loadDataList(function () {
				  o.data.loading_more = !0;
				});
			},
			methods: {
				callpay:function(){
					let that = this;
				    if (typeof WeixinJSBridge == "undefined") {
				        if (document.addEventListener) {
				            document.addEventListener('WeixinJSBridgeReady', that.jsApiCall(), false);
				        } else if (document.attachEvent) {
				            document.attachEvent('WeixinJSBridgeReady', that.jsApiCall());
				            document.attachEvent('onWeixinJSBridgeReady', that.jsApiCall());
				        }
				    } else {
				        that.jsApiCall();
				    }
				},
				
				jsApiCall: function(){
					let that = this;
					let payParam = that.payParam;
					
				    WeixinJSBridge.invoke(
				        'getBrandWCPayRequest', {
				            appId: payParam.appId,
				            nonceStr: payParam.nonceStr,
				            package: payParam.package,
				            signType: payParam.signType,
				            timeStamp: payParam.timeStamp,
				            paySign: payParam.paySign
				        },
				        function (res) {
				            if (res.err_msg == "get_brand_wcpay_request:ok") {
								uni.showToast({
									title:'支付成功',
									icon:"success"
								});
								setTimeout(function(){
									 that.data = {
									 	data_list: [],
									 	no_list: !1,
									 	no_more: !1,
									 	current_page: 0,
									 	loading_more: !0,
									 }
									 that.loadDataList();
								},1000);
				            } else {
				                WeixinJSBridge.log(res.err_msg);
								uni.showToast({
									title:'支付失败',
									icon:"error"
								});
								that.lock = 0;			
				            }
				        }
				    );
				},
				
				//订单支付
				repay(id){
					var that = this;
					if (that.lock==1) {
						return;
					}
					that.lock = 1;
					repay({id:id}).then((res) => {
						if(res.code == 1){
							that.payParam = res.data.wx;
							that.callpay();
						}else{
							uni.showToast({
								title:res.msg,
								icon:"error"
							});
							that.lock = 0;
						}
					}).catch(err => {
						console.log(err)
					});
						
				},

				chageTab(index) {
					this.tabIndex = index;
					this.data = {
						data_list: [],
						no_list: !1,
						no_more: !1,
						current_page: 0,
						loading_more: !0,
					}
					this.loadDataList();
				},
				//获取数据列表
				 loadDataList: function (f) {
					var o = this;
					if (o.lock) {
						return;
					}
					if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
					else {
					  var page = (o.data.current_page || 0) + 1;
					  var data = {
						page: page,
						current:this.tabIndex
					  }
					  o.lock = 1;
					  console.log(o.lock)
					  getOrderSumList(data).then((t) => {
						if(t.code == 1){
							  if (1 == t.data.current_page && !t.data.data.length) {
								  o.data.no_list= !0;
								  o.data.loading_more= !1
							  }
							 if (t.data.data && t.data.data.length) {
								 o.data.data_list = o.data.data_list || [];
								 o.data.data_list = o.data.data_list.concat(t.data.data), 
								 o.data.current_page= page;
							 }	
							 if (!t.data.has_more) {
								 o.data.no_more= !0;
							 }						  
							 
						}else{
							uni.showToast({
								title:'网络繁忙',
								icon:'error'
							})
						}
						o.lock = 0;
					  });
					}
				 },
			}
		}
</script>

<style>
	.wap .head {
		background: #fff;
		height: 48px;
		justify-content: space-around
	}

	.wap .head .title {
		font-size: 30rpx;
		color: #bec1c7
	}

	.wap .head .active {
		color: #333;
		padding-bottom: 7px;
		border-bottom: 2px solid #fdd329;
		font-weight: 700
	}

	.wap .head-list {
		margin: 9px 14px;
		border-radius: 9px;
		background-color: #fff;
		padding: 9px 7px
	}

	.wap .head-list .list-left view:nth-child(1) {
		color: #bec1c7;
		font-size: 24rpx
	}

	.wap .head-list .list-left view:nth-child(2) {
		color: #eb2622;
		font-size: 12px
	}

	.wap .head-list .list-next {
		margin-top: 7px;
		padding-bottom: 7px;
		border-bottom: 1px solid #f4f5f7
	}

	.wap .head-list .list-next image {
		width: 76px;
		height: 57px;
		border-radius: 7px
	}

	.wap .head-list .list-next .list-right {
		flex: 1;
		margin-left: 7px;
		color: #999;
		font-size: 24rpx;
		margin-top: 4px;
		line-height: 45rpx;
	}

	.wap .head-list .list-next .list-right .title {
		color: #333;
		font-size: 34rpx;
		font-weight: 700
	}

	.wap .head-list .list-next .list-right .icon {
		width: 40rpx;
		height: 40rpx;
	}

	.wap .head-list .list-bottom {
		color: #999;
		font-size: 24rpx;
		padding: 7px 0;
		border-bottom: 1px solid #f4f5f7
	}

	.wap .head-list .list-expire {
		color: #333;
		font-size: 28rpx;
		font-weight: 700
	}

	.wap .head-list .list-expire .amount {
		font-size: 30rpx;
		color: #eb2622;
		margin: 0 2px
	}

	.wap .head-list .list-button-region {
		margin-top: 7px
	}

	.wap .head-list .list-button-region .list-button-more {
		color: #ebebeb;
		font-size: 24rpx
	}

	.wap .head-list .list-button-region .list-button-more .list-button-list {
		width: 96px;
		background-color: #fff;
		display: flex;
		flex-flow: column
	}

	.wap .head-list .list-button-region .list-button {
		margin-left: 7px
	}

	.wap .head-list .list-button-region .list-button-text {
		border: 1px solid #bec1c7;
		color: #333;
		font-size: 12px;
		border-radius: 17px;
		padding: 4px 14px
	}

	.wap .head-list .list-button-region .list-button-text-meituan {
		width: 87px;
		border: 1px solid #fecb4e;
		color: #fecb4e;
		font-size: 12px;
		border-radius: 17px;
		padding: 4px 4px
	}

	.wap .head-list .list-button-region .list-button-text-elm {
		width: 87px;
		border: 1px solid #00a9e9;
		color: #00a9e9;
		font-size: 12px;
		border-radius: 17px;
		padding: 4px 4px
	}

	.wap .head-list .list-button-region .list-button-upload {
		background: #fdd52d;
		color: #333;
		font-size: 12px;
		border-radius: 17px;
		padding: 4px 14px
	}

	.wap .head-list .list-button-region .list-button-image {
		width: 87px;
		height: 28px
	}

	.wap .head-list .list-button-region .list-button-image image {
		width: 87px;
		height: 28px
	}
</style>
